<template>
  <div class="container">
    <el-row>
      <el-col :span="6">
        <el-input
          class="filter-item search"
          placeholder="姓名、电话号码"
          @keyup.enter.native="$refs.table.loadData()"
          v-model="params.search">
          <el-button slot="append" icon="el-icon-search" @click="$refs.table.loadData()"></el-button>
        </el-input>
      </el-col>
      <!--<el-col :span="6" :offset="1">-->
        <!--<el-select v-model="params.isSignUp" placeholder="请选择" @change="$refs.table.loadData()">-->
          <!--<el-option label="全部" value=""></el-option>-->
          <!--<el-option label="已报名" value="1"></el-option>-->
          <!--<el-option label="未报名" value="0"></el-option>-->
        <!--</el-select>-->
      <!--</el-col>-->
      <el-col :span="18" class="text-right">
        <el-button type="primary" @click="downloadExcel">Excel导出</el-button>
      </el-col>
    </el-row>

    <we-table url="activityInvolvement" :params="params" ref="table">
      <el-table-column label="活动名称" property="name"></el-table-column>
      <el-table-column label="昵称">
        <template slot-scope="scope">
          <span class="user-info">
            <img :src="scope.row.headimgurl" class="head-img"/>
            {{scope.row.nickname}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" property="username"></el-table-column>
      <el-table-column label="电话号码" property="phone"></el-table-column>
      <!--<el-table-column label="是否报名" property="phone">-->
        <!--<template slot-scope="scope">-->
          <!--<el-tag :type="scope.row.isSignUp === '0' ? 'info': ''">{{ scope.row.isSignUp === '0' ? '未报名' : '已报名'}}</el-tag>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="积分数量"  property="integrals"></el-table-column>
      <el-table-column label="推荐人" property="referralsNickname"></el-table-column>
      <el-table-column label="推荐人电话" property="referralsPhone"></el-table-column>
      <el-table-column label="报名时间" property="signUpTime" ></el-table-column>
      <!--<el-table-column label="创建时间" property="createTime" ></el-table-column>-->
    </we-table>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        params: {
          search: '',
        }
      }
    },
    methods: {
      /**
       * excel导出
       */
      downloadExcel() {
        const a = document.createElement("a");
        a.href = '/activityInvolvement/downloadExcel?search='+ this.params.search;
        document.body.appendChild(a);
        a.click();
      }
    }
  }
</script>
<style lang="sass" scoped>
  .user-info
    height: 40px
    line-height: 40px
    display: inline-flex
  .head-img
    width: 40px
    border-radius: 50%
    margin-right: 5px
</style>
